import { FC } from "react";
import Taro from "@tarojs/taro";
import { View, Text, Input, Picker } from "@tarojs/components";
import Form, { Field, useForm } from "rc-field-form";
import styles from "./index.module.less";
import { HUpload } from "@/components";
import { HIcon } from "@/components";
import { AtButton } from "taro-ui";
import { validateErrorHandler } from "@/utils/validate";
import useData from "./useData";
import {
  AddressPicker,
  ChinaeseZodiacPicker,
  ConstellationPicker,
  EducationPicker,
  GenderPicker,
  NationPicker,
} from "@/components/picker";

const PerfectUserInfo: FC = () => {
  const {
    userInfo,
    form,
    onSetFieldValue,
    selectorNameWithDictionaries,
    ...data
  } = useData();

  return (
    <View className={styles["perfect-wrapper"]}>
      <Form
        form={form}
        component={View}
        initialValues={{
          headImg: userInfo.headImg,
          wechat: userInfo.wechat,
          gender: userInfo.gender,
          genderCn: userInfo.genderCn,
          nickName: userInfo.nickName,
          ...userInfo.customerBasicInfo,
        }}
        onFinishFailed={validateErrorHandler}
        onFinish={data.onSubmit}
      >
        <View className={styles["label-wrapper"]}>
          <View className={styles["label"]}>
            <Text className={styles["require"]}>*</Text>上传照片
          </View>

          <Field
            name="headImg"
            rules={[{ required: true, message: "请先上传照片" }]}
            children={({ value }) => (
              <HUpload
                className={styles["upload"]}
                imgStyle={styles["avator"]}
                count={1}
                defaultValue={value.split(",")}
                onSuccess={(list) => onSetFieldValue("headImg", list.join())}
                onRemove={(list) => onSetFieldValue("headImg", list.join())}
              />
            )}
          ></Field>
        </View>
        <View className={styles["label-wrapper"]}>
          <View className={styles["label"]}>
            <Text className={styles["require"]}>*</Text>昵称
          </View>
          <Field
            name="nickName"
            trigger="onInput"
            rules={[{ required: true, message: "请填写昵称" }]}
          >
            <Input
              className={styles["input"]}
              placeholder="请输入昵称"
              placeholderStyle="color: #999"
              maxlength={20}
            />
          </Field>
        </View>
        <View className={styles["label-wrapper"]}>
          <View className={styles["label"]}>
            <Text className={styles["require"]}>*</Text>身高(cm)
          </View>
          <Field
            name="height"
            trigger="onInput"
            rules={[{ required: true, message: "请填写身高" }]}
          >
            <Input
              className={styles["input"]}
              placeholder="请填写身高"
              placeholderStyle="color: #999"
              maxlength={20}
            />
          </Field>
        </View>
        <View className={styles["label-wrapper"]}>
          <View className={styles["label"]}>
            <Text className={styles["require"]}>*</Text>体重(kg)
          </View>
          <Field
            name="weight"
            trigger="onInput"
            rules={[{ required: true, message: "请填写体重" }]}
          >
            <Input
              className={styles["input"]}
              placeholder="请填写体重"
              placeholderStyle="color: #999"
              maxlength={20}
            />
          </Field>
        </View>

        <Field
          name="birthday"
          rules={[{ required: true, message: "请选择生日" }]}
          children={({ value }) => (
            <Picker
              value={value}
              mode="date"
              onChange={(e) =>
                onSetFieldValue("birthday", e.detail.value, e.detail.value)
              }
            >
              <View className={styles["label-wrapper"]}>
                <View className={styles["label"]}>
                  <Text className={styles["require"]}>*</Text>生日
                </View>
                <View className={styles["right"]}>
                  <Text className={styles["text"]}>{value}</Text>
                  <HIcon type="youjiantou1" color="#999"></HIcon>
                </View>
              </View>
            </Picker>
          )}
        ></Field>
        <Field
          name="gender"
          rules={[{ required: true, message: "请选择性别" }]}
          children={({ value }) => (
            <GenderPicker
              onConfirm={(e) => onSetFieldValue("gender", e.value, e.label)}
            >
              <View className={styles["label-wrapper"]}>
                <View className={styles["label"]}>
                  <Text className={styles["require"]}>*</Text>性别
                </View>
                <View className={styles["right"]}>
                  <View className={styles["right"]}>
                    <Text className={styles["text"]}>
                      {form.getFieldValue("genderCn")}
                    </Text>
                    <HIcon type="youjiantou1" color="#999"></HIcon>
                  </View>
                </View>
              </View>
            </GenderPicker>
          )}
        ></Field>

        <Field
          name="nation"
          rules={[{ required: true, message: "请选择民族" }]}
          children={({ value }) => (
            <NationPicker
              onConfirm={(e) => onSetFieldValue("nation", e.value, e.label)}
            >
              <View className={styles["label-wrapper"]}>
                <View className={styles["label"]}>
                  <Text className={styles["require"]}>*</Text>民族
                </View>
                <View className={styles["right"]}>
                  <View className={styles["right"]}>
                    <Text className={styles["text"]}>
                      {form.getFieldValue("nationCn")}
                    </Text>
                    <HIcon type="youjiantou1" color="#999"></HIcon>
                  </View>
                </View>
              </View>
            </NationPicker>
          )}
        ></Field>

        <Field
          name="chineseZodiac"
          rules={[{ required: true, message: "请选择生肖" }]}
          children={({ value }) => (
            <ChinaeseZodiacPicker
              onConfirm={(e) =>
                onSetFieldValue("chineseZodiac", e.value, e.label)
              }
            >
              <View className={styles["label-wrapper"]}>
                <View className={styles["label"]}>
                  <Text className={styles["require"]}>*</Text>生肖
                </View>
                <View className={styles["right"]}>
                  <View className={styles["right"]}>
                    <Text className={styles["text"]}>
                      {form.getFieldValue("chineseZodiacCn")}
                    </Text>
                    <HIcon type="youjiantou1" color="#999"></HIcon>
                  </View>
                </View>
              </View>
            </ChinaeseZodiacPicker>
          )}
        ></Field>

        <Field
          name="constellation"
          rules={[{ required: true, message: "请选择星座" }]}
          children={({ value }) => (
            <ConstellationPicker
              onConfirm={(e) =>
                onSetFieldValue("constellation", e.value, e.label)
              }
            >
              <View className={styles["label-wrapper"]}>
                <View className={styles["label"]}>
                  <Text className={styles["require"]}>*</Text>星座
                </View>
                <View className={styles["right"]}>
                  <View className={styles["right"]}>
                    <Text className={styles["text"]}>
                      {form.getFieldValue("constellationCn")}
                    </Text>
                    <HIcon type="youjiantou1" color="#999"></HIcon>
                  </View>
                </View>
              </View>
            </ConstellationPicker>
          )}
        ></Field>

        <Field
          name="education"
          rules={[{ required: true, message: "请选择学历" }]}
          children={({ value }) => (
            <EducationPicker
              onConfirm={(e) => onSetFieldValue("education", e.value, e.label)}
            >
              <View className={styles["label-wrapper"]}>
                <View className={styles["label"]}>
                  <Text className={styles["require"]}>*</Text>学历
                </View>
                <View className={styles["right"]}>
                  <View className={styles["right"]}>
                    <Text className={styles["text"]}>
                      {form.getFieldValue("educationCn")}
                    </Text>
                    <HIcon type="youjiantou1" color="#999"></HIcon>
                  </View>
                </View>
              </View>
            </EducationPicker>
          )}
        ></Field>

        <Field
          name="nativePlace"
          rules={[{ required: true, message: "请选择籍贯" }]}
          children={({ value }) => (
            <AddressPicker
              onConfirm={(e) =>
                onSetFieldValue("nativePlace", e[2].cityCode, e[2].name)
              }
            >
              <View className={styles["label-wrapper"]}>
                <View className={styles["label"]}>
                  <Text className={styles["require"]}>*</Text>籍贯
                </View>
                <View className={styles["right"]}>
                  <View className={styles["right"]}>
                    <Text className={styles["text"]}>
                      {form.getFieldValue("nativePlaceCn")}
                    </Text>
                    <HIcon type="youjiantou1" color="#999"></HIcon>
                  </View>
                </View>
              </View>
            </AddressPicker>
          )}
        ></Field>

        <Field
          name="residence"
          rules={[{ required: true, message: "请选择现住地址" }]}
          children={({ value }) => (
            <AddressPicker
              onConfirm={(e) =>
                onSetFieldValue("residence", e[2].cityCode, e[2].name)
              }
            >
              <View className={styles["label-wrapper"]}>
                <View className={styles["label"]}>
                  <Text className={styles["require"]}>*</Text>现住地址
                </View>
                <View className={styles["right"]}>
                  <View className={styles["right"]}>
                    <Text className={styles["text"]}>
                      {form.getFieldValue("residenceCn")}
                    </Text>
                    <HIcon type="youjiantou1" color="#999"></HIcon>
                  </View>
                </View>
              </View>
            </AddressPicker>
          )}
        ></Field>

        <AtButton className={styles["btn"]} onClick={form.submit}>
          提交
        </AtButton>
        <AtButton
          className={`${styles["btn"]} ${styles["huise"]}`}
          onClick={data.onNext}
        >
          先跳过
        </AtButton>
      </Form>
    </View>
  );
};

export default PerfectUserInfo;
